import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // 这是应用程序的根组件。
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // 这是应用程序的主题。
        //
        // 试试这个：运行你的应用程序，使用 "flutter run"。你会看到
        // 应用程序有一个紫色的工具栏。然后，在不退出应用程序的情况下，
        // 尝试将下面 colorScheme 中的 seedColor 更改为 Colors.green，
        // 然后调用 "热重载"（保存更改或在支持 Flutter 的 IDE 中按 "热重载" 按钮，
        // 或者如果通过命令行启动应用程序，则按 "r"）。
        //
        // 注意计数器不会重置为零；应用程序的状态在重载期间不会丢失。
        // 要重置状态，请使用热重启。
        //
        // 这不仅适用于值，也适用于代码：大多数代码更改都可以通过热重载进行测试。
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  // 这是应用程序的主页组件。它是有状态的，意味着它有一个 State 对象（定义如下），
  // 其中包含影响其外观的字段。

  // 这个类是状态的配置。它保存了由父组件（在这里是 App 组件）提供的值（在这里是标题），
  // 并被 State 的 build 方法使用。Widget 子类中的字段始终标记为 "final"。

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      // 调用 setState 告诉 Flutter 框架此 State 中的内容已更改，
      // 这会导致下面的 build 方法重新运行，以便显示可以反映更新后的值。
      // 如果我们在不调用 setState 的情况下更改 _counter，则不会再次调用 build 方法，
      // 因此看起来没有任何变化。
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    // 每次调用 setState 时都会重新运行此方法，例如上面的 _incrementCounter 方法所做的那样。
    //
    // Flutter 框架已经过优化，使得重新运行 build 方法非常快，
    // 因此你可以重建需要更新的部分，而无需单独更改小部件实例。
    return Scaffold(
      appBar: AppBar(
        // 试试这个：将这里的颜色更改为特定的颜色（例如 Colors.amber），
        // 然后触发热重载，看看 AppBar 的颜色如何变化，而其他颜色保持不变。
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        // 在这里，我们从由 App.build 方法创建的 MyHomePage 对象中获取值，
        // 并使用它来设置应用栏的标题。
        title: Text(widget.title),
      ),
      body: Center(
        // Center 是一个布局组件。它接受一个子组件并将其放置在父组件的中间。
        child: Column(
          // Column 也是一个布局组件。它接受一个子组件列表并将它们垂直排列。
          // 默认情况下，它会根据其子组件的宽度调整自身大小，并尝试与父组件一样高。
          //
          // Column 有各种属性来控制其自身的大小以及如何定位其子组件。
          // 在这里，我们使用 mainAxisAlignment 将子组件垂直居中；
          // 主轴在这里是垂直轴，因为 Column 是垂直的（交叉轴将是水平的）。
          //
          // 试试这个：调用 "调试绘制"（在 IDE 中选择 "切换调试绘制" 操作，
          // 或在控制台中按 "p"），查看每个小部件的线框。
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text('You have pushed the button this many times:'),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ), // 这个尾随逗号使自动格式化在 build 方法中更美观。
    );
  }
}